<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb class="bread" separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">产品管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>基金经理管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-input
        class="content"
        v-model="input"
        placeholder="请输入搜索内容"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="dialogFormVisible = true"
        >新增</el-button
      >
      <el-table :data="managerData" border style="width: 100%">
        <el-table-column prop="mid" label="基金经理id" width="180">
        </el-table-column>
        <el-table-column prop="mname" label="基金经理名称" width="180">
        </el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <el-avatar :size="50" :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="educationLevel" label="最高学历">
        </el-table-column>
        <el-table-column prop="department" label="专业"> </el-table-column>
        <el-table-column prop="options" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit "
              @click="updateManagerData(scope.row.mid);dialogFormVisible2 = true"
              >编辑</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-delete "
              @click="delManagerData(scope.row.mid)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.pageNum"
          :page-sizes="[1, 3, 5]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
        >
        </el-pagination>
      </div>
      <el-dialog title="新增基金经理" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="基金经理名称" :label-width="formLabelWidth">
            <el-input
              v-model="managerInfo.mname"
              autocomplete="off"
              placeholder="请输入基金经理名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="基金经理头像" :label-width="formLabelWidth">
            <el-upload
              action="http://localhost:8081/2f2326c4-1783-4236-aa4f-ae9a294fff6d"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="managerInfo.avatar" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="最高学历" :label-width="formLabelWidth">
            <el-input
              v-model="managerInfo.educationLevel"
              autocomplete="off"
              placeholder="请输入最高学历 例:硕士"
            ></el-input>
          </el-form-item>
          <el-form-item label="毕业院校" :label-width="formLabelWidth">
            <el-input
              v-model="managerInfo.graduateSchool"
              autocomplete="off"
              placeholder="请输入毕业院校 例:上海财经大学"
            ></el-input>
          </el-form-item>
          <el-form-item label="专业" :label-width="formLabelWidth">
            <el-input
              v-model="managerInfo.department"
              autocomplete="off"
              placeholder="请输入专业 例:金融系"
            ></el-input>
          </el-form-item>
          <el-form-item label="称呼" :label-width="formLabelWidth">
            <el-select v-model="managerInfo.calls" placeholder="请选择">
              <el-option value="先生" label="先生"></el-option>
              <el-option value="女士" label="女士"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自我介绍" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入自我介绍内容"
              v-model="managerInfo.selfIntroduction"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="背景经历" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入背景经历内容"
              v-model="managerInfo.background"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addManager"
            >确 定</el-button
          >
        </div>
      </el-dialog>
            <el-dialog title="编辑基金经理" :visible.sync="dialogFormVisible2">
        <el-form :model="form">
          <el-form-item label="基金经理名称" :label-width="formLabelWidth">
            <el-input
              v-model="currentInfo.mname"
              autocomplete="off"
              placeholder="请输入基金经理名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="基金经理头像" :label-width="formLabelWidth">
            <el-upload
              action="http://localhost:8081/2f2326c4-1783-4236-aa4f-ae9a294fff6d"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="managerInfo.avatar" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="最高学历" :label-width="formLabelWidth">
            <el-input
              v-model="currentInfo.educationLevel"
              autocomplete="off"
              placeholder="请输入最高学历 例:硕士"
            ></el-input>
          </el-form-item>
          <el-form-item label="毕业院校" :label-width="formLabelWidth">
            <el-input
              v-model="currentInfo.graduateSchool"
              autocomplete="off"
              placeholder="请输入毕业院校 例:上海财经大学"
            ></el-input>
          </el-form-item>
          <el-form-item label="专业" :label-width="formLabelWidth">
            <el-input
              v-model="currentInfo.department"
              autocomplete="off"
              placeholder="请输入专业 例:金融系"
            ></el-input>
          </el-form-item>
          <el-form-item label="称呼" :label-width="formLabelWidth">
            <el-select v-model="currentInfo.calls" placeholder="请选择">
              <el-option value="先生" label="先生"></el-option>
              <el-option value="女士" label="女士"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自我介绍" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入自我介绍内容"
              v-model="currentInfo.selfIntroduction"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="背景经历" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入背景经历内容"
              v-model="currentInfo.background"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="uploadManager"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      limit: 5,
      managerData: [],
      total: 0,
      pageSize: 0,
      pageNum: 0,
      pages: 0,
      navigatepageNums: [],
      input: "",
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      dialogImageUrl: "",
      dialogVisible: false,
      managerInfo:{},
      dialogFormVisible2:false,
      currentInfo:{}
    };
  },
  mounted() {
    this.getManagerData();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.getManagerData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getManagerData();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async getManagerData() {
      const res = await this.$http.manager.getManagerData(
        this.page,
        this.limit
      );
      if (res.code == 200) {
        this.managerData = res.data.list;
        this.total = res.data.total;
        this.pageSize = res.data.pageSize;
        this.pageNum = res.data.pageNum;
        this.pages = res.data.pages;
        this.navigatepageNums = res.data.navigatepageNums;
      }
    },
    async delManagerData(data) {
      const res = await this.$http.manager.delManagerData(data);
      this.getManagerData();
    },
    search() {
      if (this.input) {
        this.managerData = this.managerData.filter((item) => {
          return item.mname.includes(this.input);
        });
      } else {
        this.getManagerData();
      }
    },
    async addManager(){
      const res = await this.$http.manager.addManagerData(this.managerInfo)
      this.dialogFormVisible=false
      this.getManagerData()
    },
    async updateManagerData(data){
      const res = await this.$http.manager.getOneManager(data)
      this.currentInfo=res.data
    },
    async uploadManager(){
      const res = await this.$http.manager.updateManagerData(this.currentInfo)
      this.dialogFormVisible2=false,
      this.getManagerData()
    }
  },
};
</script>

<style>
.bread {
  display: block;
  border-bottom: 1px solid #ccc;
  height: 30px;
}
.content {
  width: 250px;
  height: 50px;
  margin-top: 20px;
}
.cell {
  text-align: center;
}
.block {
  margin: 0 auto;
  text-align: center;
  margin-top: 20px;
}
</style>